<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>项目搭建之前后端交互（跨域,页面跳转,Pinia）+实战 | 袖清暮雨` Blog</title><meta name="author" content="袖清暮雨"><meta name="copyright" content="袖清暮雨"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><meta name="description" content="何为axios？axios用于前后端数据进行传递的中介。同时会涉及到跨域问题。 当两者（axios+跨域）结合时，可以实现【从登录页面跳转至后台页面】的效果。 基本步骤一：安装axios1npm install axios 二：解决【跨域】问题2.1 在vit.config.js中，扩展内容1234567891011121314151617181920212223242526import &amp;#12">
<meta property="og:type" content="article">
<meta property="og:title" content="项目搭建之前后端交互（跨域,页面跳转,Pinia）+实战">
<meta property="og:url" content="https://lemonworld.gitee.io/lemon-world/posts/1e302926.html">
<meta property="og:site_name" content="袖清暮雨&#96; Blog">
<meta property="og:description" content="何为axios？axios用于前后端数据进行传递的中介。同时会涉及到跨域问题。 当两者（axios+跨域）结合时，可以实现【从登录页面跳转至后台页面】的效果。 基本步骤一：安装axios1npm install axios 二：解决【跨域】问题2.1 在vit.config.js中，扩展内容1234567891011121314151617181920212223242526import &amp;#12">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/LemonWorld/picture/raw/master/img/%E8%BF%BD%E6%9C%88.png">
<meta property="article:published_time" content="2024-04-10T16:00:00.000Z">
<meta property="article:modified_time" content="2024-04-20T09:37:14.777Z">
<meta property="article:author" content="袖清暮雨">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="Web前端">
<meta property="article:tag" content="传统开发">
<meta property="article:tag" content="项目搭建">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/LemonWorld/picture/raw/master/img/%E8%BF%BD%E6%9C%88.png"><link rel="shortcut icon" href="/lemon-world/./img/144.png"><link rel="canonical" href="https://lemonworld.gitee.io/lemon-world/posts/1e302926.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="manifest" href="/lemon-world/manifest.json"/><meta name="msapplication-TileColor" content="#3b70fc"/><link rel="apple-touch-icon" sizes="180x180" href="/lemon-world/img/siteicon/128.png"/><link rel="icon" type="image/png" sizes="32x32" href="/lemon-world/img/siteicon/32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/lemon-world/img/siteicon/16.png"/><link rel="mask-icon" href="/lemon-world/img/siteicon/128.png" color="#5bbad5"/><link rel="stylesheet" href="/lemon-world/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/lemon-world/',
  algolia: undefined,
  localSearch: {"path":"/lemon-world/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: true,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '项目搭建之前后端交互（跨域,页面跳转,Pinia）+实战',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2024-04-20 17:37:14'
}</script><script>(win=>{
      win.saveToLocal = {
        set: (key, value, ttl) => {
          if (ttl === 0) return
          const now = Date.now()
          const expiry = now + ttl * 86400000
          const item = {
            value,
            expiry
          }
          localStorage.setItem(key, JSON.stringify(item))
        },
      
        get: key => {
          const itemStr = localStorage.getItem(key)
      
          if (!itemStr) {
            return undefined
          }
          const item = JSON.parse(itemStr)
          const now = Date.now()
      
          if (now > item.expiry) {
            localStorage.removeItem(key)
            return undefined
          }
          return item.value
        }
      }
    
      win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        script.onerror = reject
        script.onload = script.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          script.onload = script.onreadystatechange = null
          resolve()
        }

        Object.keys(attr).forEach(key => {
          script.setAttribute(key, attr[key])
        })

        document.head.appendChild(script)
      })
    
      win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onerror = reject
        link.onload = link.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          link.onload = link.onreadystatechange = null
          resolve()
        }
        document.head.appendChild(link)
      })
    
      win.activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', 'ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
        if (t === 'dark') activateDarkMode()
        else if (t === 'light') activateLightMode()
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
      const detectApple = () => {
        if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
          document.documentElement.classList.add('apple')
        }
      }
      detectApple()
    })(window)</script><link rel="stylesheet" href="/css/font.css"><link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/clock.min.css" /><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.0.0"><link rel="alternate" href="/lemon-world/atom.xml" title="袖清暮雨` Blog" type="application/atom+xml">
</head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/lemon-world/./img/sanjiu.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/lemon-world/archives/"><div class="headline">文章</div><div class="length-num">39</div></a><a href="/lemon-world/tags/"><div class="headline">标签</div><div class="length-num">21</div></a><a href="/lemon-world/categories/"><div class="headline">分类</div><div class="length-num">2</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/lemon-world/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa-solid fa-list"></i><span> 学习路线</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/lemon-world/categories/%E5%AD%A6%E4%B9%A0%E4%B8%BB%E7%BA%BF/"><span> 学习主线</span></a></li><li><a class="site-page child" href="/lemon-world/categories/%E5%AD%A6%E4%B9%A0%E6%94%AF%E7%BA%BF/"><span> 学习支线</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/lemon-world/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/lemon-world/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/lemon-world/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/lemon-world/comments/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 更多</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/lemon-world/link/"><i class="fa-fw fas fa-link"></i><span> 相关链接</span></a></li><li><a class="site-page child" href="/lemon-world/picture/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://gitee.com/LemonWorld/picture/raw/master/img/%E8%BF%BD%E6%9C%88.png')"><nav id="nav"><span id="blog-info"><a href="/lemon-world/" title="袖清暮雨` Blog"><span class="site-name">袖清暮雨` Blog</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/lemon-world/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa-solid fa-list"></i><span> 学习路线</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/lemon-world/categories/%E5%AD%A6%E4%B9%A0%E4%B8%BB%E7%BA%BF/"><span> 学习主线</span></a></li><li><a class="site-page child" href="/lemon-world/categories/%E5%AD%A6%E4%B9%A0%E6%94%AF%E7%BA%BF/"><span> 学习支线</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/lemon-world/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/lemon-world/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/lemon-world/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/lemon-world/comments/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 更多</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/lemon-world/link/"><i class="fa-fw fas fa-link"></i><span> 相关链接</span></a></li><li><a class="site-page child" href="/lemon-world/picture/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">项目搭建之前后端交互（跨域,页面跳转,Pinia）+实战</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2024-04-10T16:00:00.000Z" title="发表于 2024-04-11 00:00:00">2024-04-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-04-20T09:37:14.777Z" title="更新于 2024-04-20 17:37:14">2024-04-20</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/lemon-world/categories/%E5%AD%A6%E4%B9%A0%E4%B8%BB%E7%BA%BF/">学习主线</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="leancloud_visitors" id="/lemon-world/posts/1e302926.html" data-flag-title="项目搭建之前后端交互（跨域,页面跳转,Pinia）+实战"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span class="leancloud-visitors-count"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="何为axios？"><a href="#何为axios？" class="headerlink" title="何为axios？"></a>何为axios？</h1><p>axios用于前后端数据进行传递的中介。同时会涉及到跨域问题。</p>
<p>当两者（<strong>axios+跨域</strong>）结合时，可以实现【<strong>从登录页面跳转至后台页面</strong>】的效果。</p>
<h1 id="基本步骤"><a href="#基本步骤" class="headerlink" title="基本步骤"></a>基本步骤</h1><h2 id="一：安装axios"><a href="#一：安装axios" class="headerlink" title="一：安装axios"></a><strong>一</strong>：安装axios</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install axios</span><br></pre></td></tr></table></figure>
<h2 id="二：解决【跨域】问题"><a href="#二：解决【跨域】问题" class="headerlink" title="二：解决【跨域】问题"></a><strong>二</strong>：解决【跨域】问题</h2><h3 id="2-1-在vit-config-js中，扩展内容"><a href="#2-1-在vit-config-js中，扩展内容" class="headerlink" title="2.1 在vit.config.js中，扩展内容"></a>2.1 在<strong>vit.config.js</strong>中，扩展内容</h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">import &#123; fileURLToPath, URL &#125; from &#x27;node:url&#x27;</span><br><span class="line"></span><br><span class="line">import &#123; defineConfig &#125; from &#x27;vite&#x27;</span><br><span class="line">import vue from &#x27;@vitejs/plugin-vue&#x27;</span><br><span class="line"></span><br><span class="line">// https://vitejs.dev/config/</span><br><span class="line">export default defineConfig(&#123;</span><br><span class="line">  plugins: [</span><br><span class="line">    vue(),</span><br><span class="line">  ],</span><br><span class="line">  resolve: &#123;</span><br><span class="line">    alias: &#123;</span><br><span class="line">      &#x27;@&#x27;: fileURLToPath(new URL(&#x27;./src&#x27;, import.meta.url))</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  server:&#123;</span><br><span class="line">    //跨域问题，扩展内容</span><br><span class="line">    proxy:&#123;</span><br><span class="line">      &#x27;/api&#x27;:&#123;</span><br><span class="line">        target: &#x27;http://localhost:8080&#x27;, //后台服务所在的源【此后，只需修改此处即可】</span><br><span class="line">        changeOrigin: true, //修改源</span><br><span class="line">        rewrite: (path)=&gt;path.replace(/^\/api/,&#x27;&#x27;) //api替代为&#x27;&#x27;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="2-2-在src-utils目录下新建一个request-js文件，内容如下"><a href="#2-2-在src-utils目录下新建一个request-js文件，内容如下" class="headerlink" title="2.2 在src/utils目录下新建一个request.js文件，内容如下"></a>2.2 在<strong>src/utils目录下</strong>新建一个<strong>request.js</strong>文件，内容如下</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line">//导入axios  npm install axios</span><br><span class="line">import axios from &#x27;axios&#x27;;</span><br><span class="line">import &#123; ElMessage &#125; from &#x27;element-plus&#x27;;//引入消息提示</span><br><span class="line"></span><br><span class="line">//定义一个变量,记录公共的前缀  ,  baseURL</span><br><span class="line">const instance = axios.create(&#123;</span><br><span class="line">    baseURL: &#x27;/api&#x27;, //后端的接口地址</span><br><span class="line">    timeout: 30000 //设置超时时间为 30000 毫秒（即 30 秒）</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">//添加请求拦截器(Pinia：判断是否携带token)</span><br><span class="line">import &#123;useTokenStore&#125; from &#x27;@/stores/token.js&#x27;</span><br><span class="line">instance.interceptors.request.use(</span><br><span class="line">    (config)=&gt;&#123;</span><br><span class="line">        //请求前的回调</span><br><span class="line">        //添加token</span><br><span class="line">        const tokenStore = useTokenStore();</span><br><span class="line">        //判断有没有token</span><br><span class="line">        if(tokenStore.token)&#123;</span><br><span class="line">            //有token</span><br><span class="line">            //tokenStore.token: 获取login.vue登录中的token</span><br><span class="line">            //在pinia中定义的响应式数据，都不需要.value</span><br><span class="line">            config.headers.Authorization = tokenStore.token</span><br><span class="line">        &#125;</span><br><span class="line">        return config;</span><br><span class="line">    &#125;,</span><br><span class="line">    (err)=&gt;&#123;</span><br><span class="line">        //请求错误的回调</span><br><span class="line">        Promise.reject(err)</span><br><span class="line">    &#125;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">//添加响应拦截器</span><br><span class="line">instance.interceptors.response.use(</span><br><span class="line">    result=&gt;&#123;</span><br><span class="line">        //判断业务状态码:接受后端反馈数据中的状态码（0成功|1失败）</span><br><span class="line">        if(result.data.code===0)&#123;</span><br><span class="line">            //成功</span><br><span class="line">            return result.data;</span><br><span class="line">        &#125;</span><br><span class="line">        //操作失败</span><br><span class="line">        ElMessage.error(result.data.msg?result.data.msg:&#x27;服务异常&#x27;);////引入消息提示:错误信息提示</span><br><span class="line">        //异步的状态转化成失败的状态</span><br><span class="line">        return Promise.reject(result.data);</span><br><span class="line">    &#125;,</span><br><span class="line">    err=&gt;&#123;</span><br><span class="line">        alert(&#x27;服务异常&#x27;);</span><br><span class="line">        return Promise.reject(err);//异步的状态转化成失败的状态</span><br><span class="line">    &#125;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">export default instance;</span><br></pre></td></tr></table></figure>
<p><strong>由此，可以实现跨域问题：先访问后台服务器，再由后台服务器访问其他相关网页。</strong></p>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E8%B7%A8%E5%9F%9F.png" alt=""></p>
<h2 id="三：创建api接口-前后端交互"><a href="#三：创建api接口-前后端交互" class="headerlink" title="三：创建api接口(前后端交互)"></a><strong>三</strong>：创建api接口(前后端交互)</h2><h3 id="前提需知：前端获取后端数据格式"><a href="#前提需知：前端获取后端数据格式" class="headerlink" title="前提需知：前端获取后端数据格式"></a>前提需知：前端获取后端数据格式</h3><p><strong>获取数据的格式依据</strong></p>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E5%90%8E%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%8F%8D%E9%A6%88%E6%A0%BC%E5%BC%8F.png" alt=""></p>
<h3 id="3-1、Pinia状态管理库"><a href="#3-1、Pinia状态管理库" class="headerlink" title="3.1、Pinia状态管理库"></a>3.1、Pinia状态管理库</h3><p>Pinia的工作原理是基于Vue.js的响应式数据模型，它通过提供一个全局的存储库来管理应用程序中的状态。允许跨组件或页面共享状态。</p>
<p>场景讲解：Login.vue登录后获取token，将token暂存于Pinia中。若ArticleCategory.vue需要token，则可以从Pinia中获取token。</p>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/Pinia%E8%AE%B2%E8%A7%A3.png" alt=""></p>
<p><strong>安装Pinia</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install pinia</span><br></pre></td></tr></table></figure>
<p><strong>main.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;createPinia&#125; from <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="type">const</span> <span class="variable">app</span> <span class="operator">=</span> createApp(App)</span><br><span class="line"><span class="type">const</span> <span class="variable">pinia</span> <span class="operator">=</span> createPinia();</span><br><span class="line"></span><br><span class="line">app.use(pinia)</span><br></pre></td></tr></table></figure>
<p><strong>token.js</strong></p>
<p>在src目录下创建<strong>stores目录</strong>，在<strong>stores目录</strong>下创建<strong>token.js文件</strong>，最后呈现为<strong>src/stores/token.js</strong>。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义store</span></span><br><span class="line"><span class="keyword">import</span> &#123;defineStore&#125; from <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;ref&#125; from <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    第一个参数：名字，唯一性</span></span><br><span class="line"><span class="comment">    第二个参数：函数，函数的内部可以定义状态的所有内容</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    返回值：函数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">export <span class="type">const</span> <span class="variable">useTokenStore</span> <span class="operator">=</span> defineStore(<span class="string">&#x27;token&#x27;</span>,()=&gt;&#123;</span><br><span class="line">    <span class="comment">//定义状态的内容</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//1.响应式变量</span></span><br><span class="line">    <span class="type">const</span> <span class="variable">token</span> <span class="operator">=</span> ref(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line">    <span class="comment">//2.函数，修改token的值</span></span><br><span class="line">    <span class="type">const</span> <span class="variable">setToken</span> <span class="operator">=</span> (newToken)=&gt;&#123;</span><br><span class="line">        token.value = newToken</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//3.函数，移除token的值</span></span><br><span class="line">    <span class="type">const</span> <span class="variable">removeToken</span> <span class="operator">=</span> ()=&gt;&#123;</span><br><span class="line">        token.value=<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        token,setToken,removeToken</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p><strong>pinia应用</strong></p>
<p>pinia在组件中应用，会在接下来的【<strong>login.vue</strong>】与【<strong>articleCategory.vue</strong>】中体现。</p>
<h3 id="3-2、pinia持久化插件——persist【优化】"><a href="#3-2、pinia持久化插件——persist【优化】" class="headerlink" title="3.2、pinia持久化插件——persist【优化】"></a>3.2、pinia持久化插件——persist【优化】</h3><p>当我们刷新后，pinia就会失效，无法再次获取后端内容。因此，为了防止此类事件的发生，我们需要添加persist持久化插件。</p>
<p><strong>安装persist</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install pinia-persistedstate-plugin</span><br></pre></td></tr></table></figure>
<p><strong>main.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;createPinia&#125; from <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; createPersistedState &#125; from <span class="string">&#x27;pinia-persistedstate-plugin&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="type">const</span> <span class="variable">app</span> <span class="operator">=</span> createApp(App)    </span><br><span class="line"><span class="type">const</span> <span class="variable">pinia</span> <span class="operator">=</span> createPinia()</span><br><span class="line"><span class="type">const</span> <span class="variable">persist</span> <span class="operator">=</span> createPersistedState();</span><br><span class="line">pinia.use(persist)</span><br><span class="line">    </span><br><span class="line">app.use(pinia)</span><br></pre></td></tr></table></figure>
<p><strong>token.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义store</span></span><br><span class="line"><span class="keyword">import</span> &#123;defineStore&#125; from <span class="string">&#x27;pinia&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;ref&#125; from <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    第一个参数：名字，唯一性</span></span><br><span class="line"><span class="comment">    第二个参数：函数，函数的内部可以定义状态的所有内容</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    返回值：函数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">export <span class="type">const</span> <span class="variable">useTokenStore</span> <span class="operator">=</span> defineStore(<span class="string">&#x27;token&#x27;</span>,()=&gt;&#123;</span><br><span class="line">    <span class="comment">//定义状态的内容</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//1.响应式变量</span></span><br><span class="line">    <span class="type">const</span> <span class="variable">token</span> <span class="operator">=</span> ref(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line">    <span class="comment">//2.函数，修改token的值</span></span><br><span class="line">    <span class="type">const</span> <span class="variable">setToken</span> <span class="operator">=</span> (newToken)=&gt;&#123;</span><br><span class="line">        token.value = newToken</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//3.函数，移除token的值</span></span><br><span class="line">    <span class="type">const</span> <span class="variable">removeToken</span> <span class="operator">=</span> ()=&gt;&#123;</span><br><span class="line">        token.value=<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        token,setToken,removeToken</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,&#123;</span><br><span class="line">    persist:<span class="literal">true</span> <span class="comment">//持久化存储</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="3-3、注册接口（-RequestParam）"><a href="#3-3、注册接口（-RequestParam）" class="headerlink" title="3.3、注册接口（@RequestParam）"></a>3.3、注册接口（@RequestParam）</h3><p><strong>user.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request from <span class="string">&#x27;@/utils/request.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//注册接口函数:请求参数格式：x-www-form-urlencoded =&gt; 后端@RequestParam</span></span><br><span class="line">export <span class="type">const</span> <span class="variable">userRegisterService</span> <span class="operator">=</span> (registerData) =&gt; &#123;</span><br><span class="line">    <span class="comment">//存储将要发送给后端的请求参数</span></span><br><span class="line">    <span class="type">const</span> <span class="variable">params</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">URLSearchParams</span>()</span><br><span class="line">    <span class="keyword">for</span>(let key in registerData)&#123;</span><br><span class="line">        params.append(key,registerData[key]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> request.post(<span class="string">&#x27;/user/register&#x27;</span>,params);<span class="comment">//路径，请求参数</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>register.vue</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//调用后台注册接口，完成注册操作</span></span><br><span class="line"><span class="keyword">import</span> &#123;userRegisterService&#125; from <span class="string">&#x27;@/api/user.js&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; ElMessage &#125; from <span class="string">&#x27;element-plus&#x27;</span>;<span class="comment">//引入消息提示</span></span><br><span class="line"><span class="keyword">import</span> &#123; useRouter &#125; from <span class="string">&#x27;vue-router&#x27;</span> <span class="comment">// 跳转页面</span></span><br><span class="line"></span><br><span class="line"><span class="type">const</span> <span class="variable">router</span> <span class="operator">=</span> useRouter()</span><br><span class="line"></span><br><span class="line"><span class="type">const</span> <span class="variable">register</span> <span class="operator">=</span> async()=&gt;&#123;</span><br><span class="line">    <span class="comment">//await是异步方法，需添加async</span></span><br><span class="line">    <span class="type">let</span> <span class="variable">result</span> <span class="operator">=</span> await <span class="title function_">userRegisterService</span><span class="params">(form.value)</span> <span class="comment">//form.value: 获取响应结果</span></span><br><span class="line">    <span class="comment">//能进入此处，表示已经登录成功了</span></span><br><span class="line">    ElMessage.success(result.msg ? result.msg : <span class="string">&quot;注册成功&quot;</span>);<span class="comment">//引入消息提示:成功信息提示</span></span><br><span class="line">    router.push(<span class="string">&#x27;/login&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/registerhtml.png" alt=""></p>
<h3 id="3-4、登录接口（-RequestParam）"><a href="#3-4、登录接口（-RequestParam）" class="headerlink" title="3.4、登录接口（@RequestParam）"></a>3.4、登录接口（@RequestParam）</h3><p><strong>user.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request from <span class="string">&#x27;@/utils/request.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//登录接口函数:请求参数格式：x-www-form-urlencoded =&gt; 后端@RequestParam</span></span><br><span class="line">export <span class="type">const</span> <span class="variable">userLoginService</span> <span class="operator">=</span> (loginData)=&gt;&#123;</span><br><span class="line">    <span class="comment">//存储将要发送给后端的请求参数</span></span><br><span class="line">    <span class="type">const</span> <span class="variable">params</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="title class_">URLSearchParams</span>();</span><br><span class="line">    <span class="keyword">for</span>(let key in loginData)&#123;</span><br><span class="line">        params.append(key,loginData[key])</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> request.post(<span class="string">&#x27;/user/login&#x27;</span>,params);<span class="comment">//路径，请求参数</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>login.vue</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//调用后台注册接口，完成注册操作</span></span><br><span class="line"><span class="keyword">import</span> &#123;userRegisterService&#125; from <span class="string">&#x27;@/api/user.js&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; ElMessage &#125; from <span class="string">&#x27;element-plus&#x27;</span>;<span class="comment">//引入消息提示</span></span><br><span class="line"><span class="keyword">import</span> &#123; useRouter &#125; from <span class="string">&#x27;vue-router&#x27;</span> <span class="comment">// 跳转页面</span></span><br><span class="line"><span class="keyword">import</span> &#123;useTokenStore&#125; from <span class="string">&#x27;@/stores/token.js&#x27;</span><span class="comment">//pinia</span></span><br><span class="line"></span><br><span class="line"><span class="type">const</span> <span class="variable">router</span> <span class="operator">=</span> useRouter()</span><br><span class="line"><span class="type">const</span> <span class="variable">tokenStore</span> <span class="operator">=</span> useTokenStore();</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用后台登录接口，完成登录操作</span></span><br><span class="line"><span class="type">const</span> <span class="variable">login</span> <span class="operator">=</span> async() =&gt; &#123;</span><br><span class="line">  <span class="comment">//调用接口，完成登录功能</span></span><br><span class="line">  <span class="comment">//await是异步方法，需添加async</span></span><br><span class="line">  <span class="type">let</span> <span class="variable">result</span> <span class="operator">=</span> await <span class="title function_">userLoginService</span><span class="params">(form.value)</span>;<span class="comment">//接受后端反馈数据（0成功|1失败）</span></span><br><span class="line">  </span><br><span class="line">  <span class="comment">//能进入此处，表示已经登录成功了</span></span><br><span class="line">  ElMessage.success(result.msg ? result.msg : <span class="string">&#x27;登录成功&#x27;</span>);<span class="comment">//引入消息提示:成功信息提示</span></span><br><span class="line">  </span><br><span class="line">  <span class="comment">//把得到的token存储到pinia中</span></span><br><span class="line">  tokenStore.setToken(result.data)</span><br><span class="line">  </span><br><span class="line">  <span class="comment">//跳转到首页，路由完成跳转</span></span><br><span class="line">  router.push(<span class="string">&#x27;/&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/loginhtml.png" alt=""></p>
<h3 id="3-5、文章分类"><a href="#3-5、文章分类" class="headerlink" title="3.5、文章分类"></a>3.5、文章分类</h3><h4 id="3-5-1：GetMapping接口（获取文章分类）"><a href="#3-5-1：GetMapping接口（获取文章分类）" class="headerlink" title="3.5.1：GetMapping接口（获取文章分类）"></a>3.5.1：GetMapping接口（获取文章分类）</h4><p><strong>文章分类组件</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">&lt;script setup&gt;</span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">    Edit,</span><br><span class="line">    Delete</span><br><span class="line">&#125; from <span class="string">&#x27;@element-plus/icons-vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; ref &#125; from <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="type">const</span> <span class="variable">categorys</span> <span class="operator">=</span> ref()</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;el-card class=<span class="string">&quot;page-container&quot;</span>&gt;</span><br><span class="line">        &lt;template #header&gt;</span><br><span class="line">            &lt;div class=<span class="string">&quot;header&quot;</span>&gt;</span><br><span class="line">                &lt;span&gt;文章分类&lt;/span&gt;</span><br><span class="line">                &lt;div class=<span class="string">&quot;extra&quot;</span>&gt;</span><br><span class="line">                    &lt;el-button type=<span class="string">&quot;primary&quot;</span> <span class="meta">@click</span>=<span class="string">&quot;dialogVisible=true; title=&#x27;添加分类&#x27;;clearData()&quot;</span>&gt;添加分类&lt;/el-button&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/template&gt;</span><br><span class="line">        &lt;el-table :data=<span class="string">&quot;categorys&quot;</span> style=<span class="string">&quot;width: 100%&quot;</span>&gt;</span><br><span class="line">            &lt;el-table-column label=<span class="string">&quot;序号&quot;</span> width=<span class="string">&quot;100&quot;</span> type=<span class="string">&quot;index&quot;</span>&gt; &lt;/el-table-column&gt;</span><br><span class="line">            &lt;el-table-column label=<span class="string">&quot;分类名称&quot;</span> prop=<span class="string">&quot;categoryName&quot;</span>&gt;&lt;/el-table-column&gt;</span><br><span class="line">            &lt;el-table-column label=<span class="string">&quot;分类别名&quot;</span> prop=<span class="string">&quot;categoryAlias&quot;</span>&gt;&lt;/el-table-column&gt;</span><br><span class="line">            &lt;el-table-column label=<span class="string">&quot;操作&quot;</span> width=<span class="string">&quot;100&quot;</span>&gt;</span><br><span class="line">                &lt;template #<span class="keyword">default</span>=<span class="string">&quot;&#123; row &#125;&quot;</span>&gt;</span><br><span class="line">                    &lt;el-button :icon=<span class="string">&quot;Edit&quot;</span> circle plain type=<span class="string">&quot;primary&quot;</span> <span class="meta">@click</span>=<span class="string">&quot;showDialog(row)&quot;</span>&gt;&lt;/el-button&gt;</span><br><span class="line">                    &lt;el-button :icon=<span class="string">&quot;Delete&quot;</span> circle plain type=<span class="string">&quot;danger&quot;</span> <span class="meta">@click</span>=<span class="string">&quot;deleteCategory(row)&quot;</span>&gt;&lt;/el-button&gt;</span><br><span class="line">                &lt;/template&gt;</span><br><span class="line">            &lt;/el-table-column&gt;</span><br><span class="line">            &lt;template #empty&gt;</span><br><span class="line">                &lt;el-empty description=<span class="string">&quot;没有数据&quot;</span> /&gt;</span><br><span class="line">            &lt;/template&gt;</span><br><span class="line">        &lt;/el-table&gt;</span><br><span class="line">    &lt;/el-card&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">.page-container &#123;</span><br><span class="line">    min-height: <span class="number">100</span>%;</span><br><span class="line">    box-sizing: border-box;</span><br><span class="line">&#125;</span><br><span class="line">.header &#123;</span><br><span class="line">    display: flex;</span><br><span class="line">    align-items: center;</span><br><span class="line">    justify-content: space-between;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<p><img src= "" data-lazy-src="C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20240413203915849.png" alt=""></p>
<p><strong>article.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request from <span class="string">&#x27;@/utils/request.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//文章分类列表查询 =&gt; GetMapping</span></span><br><span class="line">export <span class="type">const</span> <span class="variable">articleCategoryListService</span> <span class="operator">=</span> () =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> request.get(<span class="string">&#x27;/category&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>articleCategory.vue</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;articleCategoryListService&#125; from <span class="string">&#x27;@/api/article.js&#x27;</span></span><br><span class="line"><span class="type">const</span> <span class="variable">articleCategoryList</span> <span class="operator">=</span> async() =&gt; &#123;</span><br><span class="line">    <span class="type">let</span> <span class="variable">result</span> <span class="operator">=</span> await <span class="title function_">articleCategoryListService</span><span class="params">()</span>;</span><br><span class="line">    categorys.value = result.data;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用获取所有文章分类的函数</span></span><br><span class="line">articleCategoryList();</span><br></pre></td></tr></table></figure>
<h4 id="3-5-2：弹窗功能（文章分类添加-文章分类修改）"><a href="#3-5-2：弹窗功能（文章分类添加-文章分类修改）" class="headerlink" title="3.5.2：弹窗功能（文章分类添加+文章分类修改）"></a>3.5.2：弹窗功能（文章分类添加+文章分类修改）</h4><p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%96%87%E7%AB%A0%E5%88%86%E7%B1%BBtemplate%E5%B1%95%E7%A4%BA.png" alt=""></p>
<p><strong>共用一个弹窗</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义变量，控制标题的提示</span></span><br><span class="line"><span class="type">const</span> <span class="variable">title</span> <span class="operator">=</span> ref(<span class="string">&#x27;&#x27;</span>)</span><br></pre></td></tr></table></figure>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 添加分类弹窗 --&gt;</span><br><span class="line">&lt;el-dialog v-model=<span class="string">&quot;dialogVisible&quot;</span> :title=<span class="string">&quot;title&quot;</span> width=<span class="string">&quot;30%&quot;</span>&gt;</span><br><span class="line">    &lt;el-form :model=<span class="string">&quot;categoryModel&quot;</span> :rules=<span class="string">&quot;rules&quot;</span> label-width=<span class="string">&quot;100px&quot;</span> style=<span class="string">&quot;padding-right: 30px&quot;</span>&gt;</span><br><span class="line">        &lt;el-form-item label=<span class="string">&quot;分类名称&quot;</span> prop=<span class="string">&quot;categoryName&quot;</span>&gt;</span><br><span class="line">            &lt;el-input v-model=<span class="string">&quot;categoryModel.categoryName&quot;</span> minlength=<span class="string">&quot;1&quot;</span> maxlength=<span class="string">&quot;10&quot;</span>&gt;&lt;/el-input&gt;</span><br><span class="line">        &lt;/el-form-item&gt;</span><br><span class="line">        &lt;el-form-item label=<span class="string">&quot;分类别名&quot;</span> prop=<span class="string">&quot;categoryAlias&quot;</span>&gt;</span><br><span class="line">            &lt;el-input v-model=<span class="string">&quot;categoryModel.categoryAlias&quot;</span> minlength=<span class="string">&quot;1&quot;</span> maxlength=<span class="string">&quot;15&quot;</span>&gt;&lt;/el-input&gt;</span><br><span class="line">        &lt;/el-form-item&gt;</span><br><span class="line">    &lt;/el-form&gt;</span><br><span class="line">    &lt;template #footer&gt;</span><br><span class="line">        &lt;span class=<span class="string">&quot;dialog-footer&quot;</span>&gt;</span><br><span class="line">            &lt;el-button <span class="meta">@click</span>=<span class="string">&quot;dialogVisible = false&quot;</span>&gt;取消&lt;/el-button&gt;</span><br><span class="line">            &lt;el-button type=<span class="string">&quot;primary&quot;</span> <span class="meta">@click</span>=<span class="string">&quot;title==&#x27;添加分类&#x27;?addCategory() : updateCategory()&quot;</span>&gt; 确认 &lt;/el-button&gt;</span><br><span class="line">        &lt;/span&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">&lt;/el-dialog&gt;</span><br></pre></td></tr></table></figure>
<p><strong>一：PostMapping接口（文章分类添加@RequestBody）</strong></p>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%96%87%E7%AB%A0%E5%88%86%E7%B1%BB%E6%B7%BB%E5%8A%A0%E5%B1%95%E7%A4%BA%E5%9B%BE.png" alt=""></p>
<p><strong>article.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request from <span class="string">&#x27;@/utils/request.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//登录接口函数:请求参数格式：application/json =&gt; 后端@RequestBody</span></span><br><span class="line"><span class="comment">//文章分类添加</span></span><br><span class="line">export <span class="type">const</span> <span class="variable">articleCategoryAddService</span> <span class="operator">=</span> (categoryData)=&gt;&#123;</span><br><span class="line">    <span class="keyword">return</span> request.post(<span class="string">&#x27;/category&#x27;</span>,categoryData)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>articleCategory.vue</strong></p>
<p> 数据模型和校验规则</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;articleCategoryAddService&#125; from <span class="string">&#x27;@/api/article.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//控制添加分类弹窗</span></span><br><span class="line"><span class="type">const</span> <span class="variable">dialogVisible</span> <span class="operator">=</span> ref(<span class="literal">false</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//添加分类数据模型</span></span><br><span class="line"><span class="type">const</span> <span class="variable">categoryModel</span> <span class="operator">=</span> ref(&#123;</span><br><span class="line">    categoryName: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    categoryAlias: <span class="string">&#x27;&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//添加分类表单校验</span></span><br><span class="line"><span class="type">const</span> <span class="variable">rules</span> <span class="operator">=</span> &#123;</span><br><span class="line">    categoryName: [</span><br><span class="line">        &#123; required: <span class="literal">true</span>, message: <span class="string">&#x27;请输入分类名称&#x27;</span>, trigger: <span class="string">&#x27;blur&#x27;</span> &#125;,</span><br><span class="line">    ],</span><br><span class="line">    categoryAlias: [</span><br><span class="line">        &#123; required: <span class="literal">true</span>, message: <span class="string">&#x27;请输入分类别名&#x27;</span>, trigger: <span class="string">&#x27;blur&#x27;</span> &#125;,</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用接口，添加表单</span></span><br><span class="line"><span class="keyword">import</span> &#123;ElMessage&#125; from <span class="string">&#x27;element-plus&#x27;</span></span><br><span class="line"><span class="type">const</span> <span class="variable">addCategory</span> <span class="operator">=</span> async()=&gt;&#123;</span><br><span class="line">    <span class="comment">//调用接口</span></span><br><span class="line">    <span class="type">let</span> <span class="variable">result</span> <span class="operator">=</span> await <span class="title function_">articleCategoryAddService</span><span class="params">(categoryModel.value)</span>;</span><br><span class="line">    ElMessage.success(result.msg?result.msg:<span class="string">&#x27;添加成功&#x27;</span>)</span><br><span class="line"></span><br><span class="line">    <span class="comment">//调用获取所有文章分类的函数</span></span><br><span class="line">    articleCategoryList();<span class="comment">//刷新当前的列表页面</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//关闭弹窗</span></span><br><span class="line">    dialogVisible.value=<span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//添加按钮时，需要清空模型的数据</span></span><br><span class="line"><span class="type">const</span> <span class="variable">clearData</span> <span class="operator">=</span> ()=&gt;&#123;</span><br><span class="line">    categoryModel.value.categoryName=<span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    categoryModel.value.categoryAlias=<span class="string">&#x27;&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>添加分类按钮单击事件</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-button type=<span class="string">&quot;primary&quot;</span> <span class="meta">@click</span>=<span class="string">&quot;dialogVisible = true&quot;</span>&gt;添加分类&lt;/el-button&gt;</span><br></pre></td></tr></table></figure>
<p><strong>二：PutMapping接口（文章分类修改@RequestBody）</strong></p>
<p><strong>article.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request from <span class="string">&#x27;@/utils/request.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//登录接口函数:请求参数格式：application/json =&gt; 后端@RequestBody</span></span><br><span class="line"><span class="comment">//文章分类修改</span></span><br><span class="line">export const articleCategoryUpdateService=(categoryData)=&gt;&#123;</span><br><span class="line">    <span class="keyword">return</span> request.put(<span class="string">&#x27;/category&#x27;</span>,categoryData)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>articleCategory.vue</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;articleCategoryUpdateService&#125; from <span class="string">&#x27;@/api/article.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//展示编辑弹窗（函数）</span></span><br><span class="line"><span class="type">const</span> <span class="variable">showDialog</span> <span class="operator">=</span> (row)=&gt;&#123;</span><br><span class="line">    dialogVisible.value=<span class="literal">true</span>; </span><br><span class="line">    title.value=<span class="string">&#x27;编辑分类&#x27;</span>;</span><br><span class="line">    <span class="comment">//数据拷贝</span></span><br><span class="line">    categoryModel.value.categoryName = row.categoryName;</span><br><span class="line">    categoryModel.value.categoryAlias = row.categoryAlias;</span><br><span class="line">    <span class="comment">//扩展id属性，将来需要传递给后台，完成分类的修改</span></span><br><span class="line">    categoryModel.value.id = row.id;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//编辑分类</span></span><br><span class="line"><span class="type">const</span> <span class="variable">updateCategory</span> <span class="operator">=</span> async()=&gt;&#123;</span><br><span class="line">    <span class="comment">//调用接口</span></span><br><span class="line">    <span class="type">let</span> <span class="variable">result</span> <span class="operator">=</span> await <span class="title function_">articleCategoryUpdateService</span><span class="params">(categoryModel.value)</span>;</span><br><span class="line">    ElMessage.success(result.msg?result.msg:<span class="string">&#x27;修改成功&#x27;</span>)</span><br><span class="line"></span><br><span class="line">    <span class="comment">//调用获取所有文章分类的函数</span></span><br><span class="line">    articleCategoryList();<span class="comment">//刷新当前的列表页面</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//关闭弹窗</span></span><br><span class="line">    dialogVisible.value=<span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="3-5-3：DeleteMapping接口（文章分类删除-RequestParam）"><a href="#3-5-3：DeleteMapping接口（文章分类删除-RequestParam）" class="headerlink" title="3.5.3：DeleteMapping接口（文章分类删除@RequestParam）"></a>3.5.3：DeleteMapping接口（文章分类删除@RequestParam）</h4><p><strong>article.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request from <span class="string">&#x27;@/utils/request.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//登录接口函数:请求参数格式：queryString =&gt; 后端@RequestBody</span></span><br><span class="line"><span class="comment">//文章分类删除</span></span><br><span class="line">export const articleCategoryDeleteService=(id)=&gt;&#123;</span><br><span class="line">    <span class="keyword">return</span> request.delete(<span class="string">&#x27;/category?id=&#x27;</span>+id)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>articleCategory.vue</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;articleCategoryDeleteService&#125; from <span class="string">&#x27;@/api/article.js&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; ElMessageBox &#125; from <span class="string">&#x27;element-plus&#x27;</span>; </span><br><span class="line"><span class="comment">//删除</span></span><br><span class="line"><span class="type">const</span> <span class="variable">deleteCategory</span> <span class="operator">=</span> (row)=&gt;&#123;</span><br><span class="line">    <span class="comment">//提示用户 确认框</span></span><br><span class="line">    ElMessageBox.confirm(</span><br><span class="line">        <span class="string">&#x27;你确认删除该分类信息吗？&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;温馨提示&#x27;</span>,</span><br><span class="line">        &#123;</span><br><span class="line">        confirmButtonText: <span class="string">&#x27;确认&#x27;</span>,</span><br><span class="line">        cancelButtonText: <span class="string">&#x27;取消&#x27;</span>,</span><br><span class="line">        type: <span class="string">&#x27;warning&#x27;</span>,</span><br><span class="line">        &#125;</span><br><span class="line">    )</span><br><span class="line">        .then(async() =&gt; &#123;</span><br><span class="line">            <span class="comment">//接口调用</span></span><br><span class="line">            <span class="type">let</span> <span class="variable">result</span> <span class="operator">=</span> await <span class="title function_">articleCategoryDeleteService</span><span class="params">(row.id)</span>;</span><br><span class="line">            ElMessage(&#123;</span><br><span class="line">                type: <span class="string">&#x27;success&#x27;</span>,</span><br><span class="line">                message: <span class="string">&#x27;删除成功&#x27;</span>,</span><br><span class="line">            &#125;)</span><br><span class="line">            <span class="comment">//刷新列表</span></span><br><span class="line">            articleCategoryList();</span><br><span class="line">        &#125;)</span><br><span class="line">        .<span class="keyword">catch</span>(() =&gt; &#123;</span><br><span class="line">            ElMessage(&#123;</span><br><span class="line">                type: <span class="string">&#x27;info&#x27;</span>,</span><br><span class="line">                message: <span class="string">&#x27;用户取消了删除&#x27;</span>,</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="3-6、文章内容管理"><a href="#3-6、文章内容管理" class="headerlink" title="3.6、文章内容管理"></a>3.6、文章内容管理</h3><h4 id="总览图"><a href="#总览图" class="headerlink" title="总览图"></a>总览图</h4><p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8%E6%80%BB%E4%BD%93%E5%9B%BE.png" alt=""></p>
<p>使用中文语言包，解决分页条中文问题, 在main.js中完成</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> locale from <span class="string">&#x27;element-plus/dist/locale/zh-cn.js&#x27;</span></span><br><span class="line"></span><br><span class="line">app.use(ElementPlus,&#123;locale&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>文章管理组件</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br></pre></td><td class="code"><pre><span class="line">&lt;script setup&gt;</span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">    Edit,</span><br><span class="line">    Delete</span><br><span class="line">&#125; from <span class="string">&#x27;@element-plus/icons-vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; ref &#125; from <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//【文章分类】数据模型</span></span><br><span class="line"><span class="type">const</span> <span class="variable">categorys</span> <span class="operator">=</span> ref()</span><br><span class="line"></span><br><span class="line"><span class="comment">//回显【文章分类】</span></span><br><span class="line"><span class="keyword">import</span> &#123;articleCategoryListService&#125; from <span class="string">&#x27;@/api/article.js&#x27;</span></span><br><span class="line"><span class="type">const</span> <span class="variable">articleCategoryList</span> <span class="operator">=</span> async() =&gt; &#123;</span><br><span class="line">    <span class="type">let</span> <span class="variable">result</span> <span class="operator">=</span> await <span class="title function_">articleCategoryListService</span><span class="params">()</span>;</span><br><span class="line"></span><br><span class="line">    categorys.value = result.data;</span><br><span class="line">&#125;</span><br><span class="line">articleCategoryList();</span><br><span class="line"></span><br><span class="line"><span class="comment">//用户搜索时选中的分类id</span></span><br><span class="line">const categoryId=ref(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//用户搜索时选中的发布状态</span></span><br><span class="line">const state=ref(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//文章列表数据模型</span></span><br><span class="line"><span class="type">const</span> <span class="variable">articles</span> <span class="operator">=</span> ref([</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="string">&quot;id&quot;</span>: <span class="number">5</span>,</span><br><span class="line">        <span class="string">&quot;title&quot;</span>: <span class="string">&quot;陕西旅游攻略&quot;</span>,</span><br><span class="line">        <span class="string">&quot;content&quot;</span>: <span class="string">&quot;兵马俑,华清池,法门寺,华山...爱去哪去哪...&quot;</span>,</span><br><span class="line">        <span class="string">&quot;coverImg&quot;</span>: <span class="string">&quot;https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png&quot;</span>,</span><br><span class="line">        <span class="string">&quot;state&quot;</span>: <span class="string">&quot;草稿&quot;</span>,</span><br><span class="line">        <span class="string">&quot;categoryId&quot;</span>: <span class="number">2</span>,</span><br><span class="line">        <span class="string">&quot;createTime&quot;</span>: <span class="string">&quot;2023-09-03 11:55:30&quot;</span>,</span><br><span class="line">        <span class="string">&quot;updateTime&quot;</span>: <span class="string">&quot;2023-09-03 11:55:30&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="string">&quot;id&quot;</span>: <span class="number">5</span>,</span><br><span class="line">        <span class="string">&quot;title&quot;</span>: <span class="string">&quot;陕西旅游攻略&quot;</span>,</span><br><span class="line">        <span class="string">&quot;content&quot;</span>: <span class="string">&quot;兵马俑,华清池,法门寺,华山...爱去哪去哪...&quot;</span>,</span><br><span class="line">        <span class="string">&quot;coverImg&quot;</span>: <span class="string">&quot;https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png&quot;</span>,</span><br><span class="line">        <span class="string">&quot;state&quot;</span>: <span class="string">&quot;草稿&quot;</span>,</span><br><span class="line">        <span class="string">&quot;categoryId&quot;</span>: <span class="number">2</span>,</span><br><span class="line">        <span class="string">&quot;createTime&quot;</span>: <span class="string">&quot;2023-09-03 11:55:30&quot;</span>,</span><br><span class="line">        <span class="string">&quot;updateTime&quot;</span>: <span class="string">&quot;2023-09-03 11:55:30&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="string">&quot;id&quot;</span>: <span class="number">5</span>,</span><br><span class="line">        <span class="string">&quot;title&quot;</span>: <span class="string">&quot;陕西旅游攻略&quot;</span>,</span><br><span class="line">        <span class="string">&quot;content&quot;</span>: <span class="string">&quot;兵马俑,华清池,法门寺,华山...爱去哪去哪...&quot;</span>,</span><br><span class="line">        <span class="string">&quot;coverImg&quot;</span>: <span class="string">&quot;https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png&quot;</span>,</span><br><span class="line">        <span class="string">&quot;state&quot;</span>: <span class="string">&quot;草稿&quot;</span>,</span><br><span class="line">        <span class="string">&quot;categoryId&quot;</span>: <span class="number">2</span>,</span><br><span class="line">        <span class="string">&quot;createTime&quot;</span>: <span class="string">&quot;2023-09-03 11:55:30&quot;</span>,</span><br><span class="line">        <span class="string">&quot;updateTime&quot;</span>: <span class="string">&quot;2023-09-03 11:55:30&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">])</span><br><span class="line"></span><br><span class="line"><span class="comment">//分页条数据模型</span></span><br><span class="line"><span class="type">const</span> <span class="variable">pageNum</span> <span class="operator">=</span> ref(<span class="number">1</span>)<span class="comment">//当前页</span></span><br><span class="line"><span class="type">const</span> <span class="variable">total</span> <span class="operator">=</span> ref(<span class="number">20</span>)<span class="comment">//总条数</span></span><br><span class="line"><span class="type">const</span> <span class="variable">pageSize</span> <span class="operator">=</span> ref(<span class="number">3</span>)<span class="comment">//每页条数</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//当每页条数发生了变化，调用此函数</span></span><br><span class="line"><span class="type">const</span> <span class="variable">onSizeChange</span> <span class="operator">=</span> (size) =&gt; &#123;</span><br><span class="line">    pageSize.value = size</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//当前页码发生变化，调用此函数</span></span><br><span class="line"><span class="type">const</span> <span class="variable">onCurrentChange</span> <span class="operator">=</span> (num) =&gt; &#123;</span><br><span class="line">    pageNum.value = num</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;el-card class=<span class="string">&quot;page-container&quot;</span>&gt;</span><br><span class="line">        &lt;template #header&gt;</span><br><span class="line">            &lt;div class=<span class="string">&quot;header&quot;</span>&gt;</span><br><span class="line">                &lt;span&gt;文章管理&lt;/span&gt;</span><br><span class="line">                &lt;div class=<span class="string">&quot;extra&quot;</span>&gt;</span><br><span class="line">                    &lt;el-button type=<span class="string">&quot;primary&quot;</span>&gt;添加文章&lt;/el-button&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/template&gt;</span><br><span class="line">        &lt;!-- 搜索表单 --&gt;</span><br><span class="line">        &lt;el-form inline&gt;</span><br><span class="line">            &lt;el-form-item label=<span class="string">&quot;文章分类：&quot;</span> style=<span class="string">&quot;width: 300px&quot;</span>&gt;</span><br><span class="line">                &lt;el-select placeholder=<span class="string">&quot;请选择&quot;</span> v-model=<span class="string">&quot;categoryId&quot;</span>&gt;</span><br><span class="line">                    &lt;el-option </span><br><span class="line">                        v-<span class="keyword">for</span>=<span class="string">&quot;c in categorys&quot;</span> </span><br><span class="line">                        :key=<span class="string">&quot;c.id&quot;</span> </span><br><span class="line">                        :label=<span class="string">&quot;c.categoryName&quot;</span></span><br><span class="line">                        :value=<span class="string">&quot;c.id&quot;</span>&gt;</span><br><span class="line">                    &lt;/el-option&gt;</span><br><span class="line">                &lt;/el-select&gt;</span><br><span class="line">            &lt;/el-form-item&gt;</span><br><span class="line"></span><br><span class="line">            &lt;el-form-item label=<span class="string">&quot;发布状态：&quot;</span> style=<span class="string">&quot;width: 300px&quot;</span>&gt;</span><br><span class="line">                &lt;el-select placeholder=<span class="string">&quot;请选择&quot;</span> v-model=<span class="string">&quot;state&quot;</span>&gt;</span><br><span class="line">                    &lt;el-option label=<span class="string">&quot;已发布&quot;</span> value=<span class="string">&quot;已发布&quot;</span>&gt;&lt;/el-option&gt;</span><br><span class="line">                    &lt;el-option label=<span class="string">&quot;草稿&quot;</span> value=<span class="string">&quot;草稿&quot;</span>&gt;&lt;/el-option&gt;</span><br><span class="line">                &lt;/el-select&gt;</span><br><span class="line">            &lt;/el-form-item&gt;</span><br><span class="line">            &lt;el-form-item&gt;</span><br><span class="line">                &lt;el-button type=<span class="string">&quot;primary&quot;</span>&gt;搜索&lt;/el-button&gt;</span><br><span class="line">                &lt;el-button&gt;重置&lt;/el-button&gt;</span><br><span class="line">            &lt;/el-form-item&gt;</span><br><span class="line">        &lt;/el-form&gt;</span><br><span class="line">        &lt;!-- 文章列表 --&gt;</span><br><span class="line">        &lt;el-table :data=<span class="string">&quot;articles&quot;</span> style=<span class="string">&quot;width: 100%&quot;</span>&gt;</span><br><span class="line">            &lt;el-table-column label=<span class="string">&quot;文章标题&quot;</span> width=<span class="string">&quot;400&quot;</span> prop=<span class="string">&quot;title&quot;</span>&gt;&lt;/el-table-column&gt;</span><br><span class="line">            &lt;el-table-column label=<span class="string">&quot;分类&quot;</span> prop=<span class="string">&quot;categoryId&quot;</span>&gt;&lt;/el-table-column&gt;</span><br><span class="line">            &lt;el-table-column label=<span class="string">&quot;发表时间&quot;</span> prop=<span class="string">&quot;createTime&quot;</span>&gt; &lt;/el-table-column&gt;</span><br><span class="line">            &lt;el-table-column label=<span class="string">&quot;状态&quot;</span> prop=<span class="string">&quot;state&quot;</span>&gt;&lt;/el-table-column&gt;</span><br><span class="line">            &lt;el-table-column label=<span class="string">&quot;操作&quot;</span> width=<span class="string">&quot;100&quot;</span>&gt;</span><br><span class="line">                &lt;template #<span class="keyword">default</span>=<span class="string">&quot;&#123; row &#125;&quot;</span>&gt;</span><br><span class="line">                    &lt;el-button :icon=<span class="string">&quot;Edit&quot;</span> circle plain type=<span class="string">&quot;primary&quot;</span>&gt;&lt;/el-button&gt;</span><br><span class="line">                    &lt;el-button :icon=<span class="string">&quot;Delete&quot;</span> circle plain type=<span class="string">&quot;danger&quot;</span>&gt;&lt;/el-button&gt;</span><br><span class="line">                &lt;/template&gt;</span><br><span class="line">            &lt;/el-table-column&gt;</span><br><span class="line">            &lt;template #empty&gt;</span><br><span class="line">                &lt;el-empty description=<span class="string">&quot;没有数据&quot;</span> /&gt;</span><br><span class="line">            &lt;/template&gt;</span><br><span class="line">        &lt;/el-table&gt;</span><br><span class="line">        &lt;!-- 分页条 --&gt;</span><br><span class="line">        &lt;el-pagination v-model:current-page=<span class="string">&quot;pageNum&quot;</span> v-model:page-size=<span class="string">&quot;pageSize&quot;</span> :page-sizes=<span class="string">&quot;[3, 5 ,10, 15]&quot;</span></span><br><span class="line">            layout=<span class="string">&quot;jumper, total, sizes, prev, pager, next&quot;</span> background :total=<span class="string">&quot;total&quot;</span> <span class="meta">@size</span>-change=<span class="string">&quot;onSizeChange&quot;</span></span><br><span class="line">            <span class="meta">@current</span>-change=<span class="string">&quot;onCurrentChange&quot;</span> style=<span class="string">&quot;margin-top: 20px; justify-content: flex-end&quot;</span> /&gt;</span><br><span class="line">    &lt;/el-card&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">.page-container &#123;</span><br><span class="line">    min-height: <span class="number">100</span>%;</span><br><span class="line">    box-sizing: border-box;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.header &#123;</span><br><span class="line">    display: flex;</span><br><span class="line">    align-items: center;</span><br><span class="line">    justify-content: space-between;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h4 id="3-6-1：GetMapping接口（文章列表查询）"><a href="#3-6-1：GetMapping接口（文章列表查询）" class="headerlink" title="3.6.1：GetMapping接口（文章列表查询）"></a>3.6.1：GetMapping接口（文章列表查询）</h4><p><strong>article.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request from <span class="string">&#x27;@/utils/request.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//接口函数:请求参数格式：queryString =&gt; 后端@RequestBody</span></span><br><span class="line"><span class="comment">//文章列表查询</span></span><br><span class="line">export <span class="type">const</span> <span class="variable">articleListService</span> <span class="operator">=</span> (params) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> request.get(<span class="string">&#x27;/article&#x27;</span>, &#123; params: params &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>articleManagement.vue</strong></p>
<p>后端数据传入前端的格式</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;code&quot;: 0,</span><br><span class="line">    &quot;message&quot;: &quot;操作成功&quot;,</span><br><span class="line">    &quot;【data】&quot;: &#123;</span><br><span class="line">        &quot;【total】&quot;: 1,</span><br><span class="line">        &quot;【items】&quot;: [</span><br><span class="line">            &#123;</span><br><span class="line">                &quot;id&quot;: 5,</span><br><span class="line">                &quot;title&quot;: &quot;陕西旅游攻略&quot;,</span><br><span class="line">                &quot;content&quot;: &quot;兵马俑,华清池,法门寺,华山...爱去哪去哪...&quot;,</span><br><span class="line">                ...</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>具体展示</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//用户搜索时选中的分类id</span></span><br><span class="line">const categoryId=ref(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//用户搜索时选中的发布状态</span></span><br><span class="line">const state=ref(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//分页条数据模型</span></span><br><span class="line"><span class="type">const</span> <span class="variable">pageNum</span> <span class="operator">=</span> ref(<span class="number">1</span>)<span class="comment">//当前页</span></span><br><span class="line"><span class="type">const</span> <span class="variable">total</span> <span class="operator">=</span> ref(<span class="number">20</span>)<span class="comment">//总条数</span></span><br><span class="line"><span class="type">const</span> <span class="variable">pageSize</span> <span class="operator">=</span> ref(<span class="number">3</span>)<span class="comment">//每页条数</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//文章列表数据模型</span></span><br><span class="line"><span class="type">const</span> <span class="variable">articles</span> <span class="operator">=</span> ref()</span><br><span class="line"></span><br><span class="line"><span class="comment">//获取文章详情</span></span><br><span class="line"><span class="keyword">import</span> &#123;articleListService&#125; from <span class="string">&#x27;@/api/article.js&#x27;</span></span><br><span class="line"><span class="type">const</span> <span class="variable">articleList</span> <span class="operator">=</span> async() =&gt;&#123;</span><br><span class="line">    <span class="type">let</span> <span class="variable">params</span> <span class="operator">=</span> &#123;</span><br><span class="line">        pageNum: pageNum.value,</span><br><span class="line">        pageSize: pageSize.value,</span><br><span class="line">        categoryId: categoryId.value ? categoryId.value : <span class="literal">null</span>,</span><br><span class="line">        state: state.value ? state.value : <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="type">let</span> <span class="variable">result</span> <span class="operator">=</span> await <span class="title function_">articleListService</span><span class="params">(params)</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//渲染视图</span></span><br><span class="line">    total.value = result.data.total;</span><br><span class="line">    articles.value = result.data.items;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//处理数据，给数据模型扩展一个属性categoryName，分类名称(categoryId -&gt; categoryName)</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="type">let</span> <span class="variable">i</span> <span class="operator">=</span> <span class="number">0</span>;i&lt;articles.value.length;i++)&#123;</span><br><span class="line">        <span class="type">let</span> <span class="variable">article</span> <span class="operator">=</span> articles.value[i];</span><br><span class="line">        <span class="keyword">for</span>(let j=<span class="number">0</span>;j&lt;categorys.value.length;j++)&#123;</span><br><span class="line">            <span class="keyword">if</span>(article.categoryId == categorys.value[j].id)&#123;</span><br><span class="line">                article.categoryName = categorys.value[j].categoryName;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">articleList();</span><br></pre></td></tr></table></figure>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8%E6%9F%A5%E8%AF%A222.0.png" alt=""></p>
<p>效果展示</p>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8%E6%9F%A5%E8%AF%A2%E5%85%B7%E4%BD%93%E5%B1%95%E7%A4%BA.png" alt=""></p>
<h4 id="3-6-2：搜索和重置和页码"><a href="#3-6-2：搜索和重置和页码" class="headerlink" title="3.6.2：搜索和重置和页码"></a>3.6.2：搜索和重置和页码</h4><p><strong>页码</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">//当每页条数发生了变化，调用此函数</span><br><span class="line">const onSizeChange = (size) =&gt; &#123;</span><br><span class="line">    pageSize.value = size</span><br><span class="line">    articleList()</span><br><span class="line">&#125;</span><br><span class="line">//当前页码发生变化，调用此函数</span><br><span class="line">const onCurrentChange = (num) =&gt; &#123;</span><br><span class="line">    pageNum.value = num</span><br><span class="line">    articleList()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>为<strong>搜索按钮</strong>绑定单击事件，调用getArticles函数即可</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">&quot;primary&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;articleList&quot;</span>&gt;</span>搜索<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>为<strong>重置按钮</strong>绑定单击事件，清除categoryId和state的之即可</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-button</span> @<span class="attr">click</span>=<span class="string">&quot;categoryId=&#x27;&#x27;;state=&#x27;&#x27;&quot;</span>&gt;</span>重置<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8%E6%90%9C%E7%B4%A2%E4%B8%8E%E9%87%8D%E7%BD%AE%E4%B8%8E%E9%A1%B5%E7%A0%81.png" alt=""></p>
<h4 id="3-6-3：PostMapping接口（添加文章）"><a href="#3-6-3：PostMapping接口（添加文章）" class="headerlink" title="3.6.3：PostMapping接口（添加文章）"></a>3.6.3：PostMapping接口（添加文章）</h4><h5 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h5><p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E4%B9%8B%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA2.0.png" alt=""></p>
<h5 id="实际操作"><a href="#实际操作" class="headerlink" title="实际操作"></a>实际操作</h5><p><strong>articleManagement.vue</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">Plus</span>&#125; <span class="keyword">from</span> <span class="string">&#x27;@element-plus/icons-vue&#x27;</span></span><br><span class="line"><span class="comment">//控制抽屉是否显示</span></span><br><span class="line"><span class="keyword">const</span> visibleDrawer = <span class="title function_">ref</span>(<span class="literal">false</span>)</span><br><span class="line"><span class="comment">//添加表单数据模型</span></span><br><span class="line"><span class="keyword">const</span> articleModel = <span class="title function_">ref</span>(&#123;</span><br><span class="line">    <span class="attr">title</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="attr">categoryId</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="attr">coverImg</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="attr">content</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="attr">state</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 抽屉 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">el-drawer</span> <span class="attr">v-model</span>=<span class="string">&quot;visibleDrawer&quot;</span> <span class="attr">title</span>=<span class="string">&quot;添加文章&quot;</span> <span class="attr">direction</span>=<span class="string">&quot;rtl&quot;</span> <span class="attr">size</span>=<span class="string">&quot;50%&quot;</span>&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 添加文章表单 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">el-form</span> <span class="attr">:model</span>=<span class="string">&quot;articleModel&quot;</span> <span class="attr">label-width</span>=<span class="string">&quot;100px&quot;</span> &gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;文章标题&quot;</span> &gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">&quot;articleModel.title&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入标题&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">el-input</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;文章分类&quot;</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">el-select</span> <span class="attr">placeholder</span>=<span class="string">&quot;请选择&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;articleModel.categoryId&quot;</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">el-option</span> <span class="attr">v-for</span>=<span class="string">&quot;c in categorys&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;c.id&quot;</span> <span class="attr">:label</span>=<span class="string">&quot;c.categoryName&quot;</span> <span class="attr">:value</span>=<span class="string">&quot;c.id&quot;</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">el-option</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">el-select</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;文章封面&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">                    <span class="tag">&lt;<span class="name">el-upload</span> <span class="attr">class</span>=<span class="string">&quot;avatar-uploader&quot;</span> <span class="attr">:auto-upload</span>=<span class="string">&quot;false&quot;</span> <span class="attr">:show-file-list</span>=<span class="string">&quot;false&quot;</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">img</span> <span class="attr">v-if</span>=<span class="string">&quot;articleModel.coverImg&quot;</span> <span class="attr">:src</span>=<span class="string">&quot;articleModel.coverImg&quot;</span> <span class="attr">class</span>=<span class="string">&quot;avatar&quot;</span> /&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">el-icon</span> <span class="attr">v-else</span> <span class="attr">class</span>=<span class="string">&quot;avatar-uploader-icon&quot;</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">Plus</span> /&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">el-icon</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">el-upload</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;文章内容&quot;</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;editor&quot;</span>&gt;</span>富文本编辑器<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">&quot;primary&quot;</span>&gt;</span>发布<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">&quot;info&quot;</span>&gt;</span>草稿<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">el-form</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">el-drawer</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.el-upload</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> dashed <span class="built_in">var</span>(--el-border-color);</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">transition</span>: <span class="built_in">var</span>(--el-transition-duration-fast);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.avatar</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">178px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">178px</span>;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.el-upload</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="built_in">var</span>(--el-color-primary);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.avatar-uploader</span>&#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">178px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">178px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">#8c939d</span> dashed <span class="number">1px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.el-icon</span><span class="selector-class">.avatar-uploader-icon</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">28px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#8c939d</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">178px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">178px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>为添加文章按钮添加单击事件，展示抽屉</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">&quot;primary&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;visibleDrawer = true&quot;</span>&gt;</span>添加文章<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="gt-富文本编辑器"><a href="#gt-富文本编辑器" class="headerlink" title="=&gt; 富文本编辑器"></a>=&gt; 富文本编辑器</h5><p>文章内容需要使用到富文本编辑器，这里咱们使用一个开源的富文本编辑器 Quill</p>
<p>官网地址： <a target="_blank" rel="noopener" href="https://vueup.github.io/vue-quill/">https://vueup.github.io/vue-quill/</a></p>
<p><strong>安装：</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install @vueup/vue-quill@latest --save</span><br></pre></td></tr></table></figure>
<p><strong>articleManagement.vue</strong></p>
<p>导入组件和样式：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">QuillEditor</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;@vueup/vue-quill&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;@vueup/vue-quill/dist/vue-quill.snow.css&#x27;</span></span><br></pre></td></tr></table></figure>
<p>页面长使用quill组件：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">quill-editor</span></span></span><br><span class="line"><span class="tag">	<span class="attr">theme</span>=<span class="string">&quot;snow&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">v-model:content</span>=<span class="string">&quot;articleModel.content&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">contentType</span>=<span class="string">&quot;html&quot;</span></span></span><br><span class="line"><span class="tag">	&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">quill-editor</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8%E4%B9%8B%E6%8A%BD%E5%B1%89%E4%BD%8D%E7%BD%AE.png" alt=""></p>
<p>需要使用scss,需要添加<strong>lang=”scss”</strong>。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;style lang=&quot;scss&quot; scoped&gt;</span><br><span class="line">...</span><br><span class="line"><span class="comment">/* 抽屉中的富文本编辑器 */</span></span><br><span class="line"><span class="selector-class">.editor</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  :<span class="built_in">deep</span>(.ql-editor) &#123;</span><br><span class="line">    <span class="attribute">min-height</span>: <span class="number">200px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">...</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h5 id="gt-图片上传"><a href="#gt-图片上传" class="headerlink" title="=&gt; 图片上传???"></a>=&gt; 图片上传???</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">Plus</span>&#125; <span class="keyword">from</span> <span class="string">&#x27;@element-plus/icons-vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//导入token</span></span><br><span class="line"><span class="keyword">import</span> &#123;useTokenStore&#125; <span class="keyword">from</span> <span class="string">&#x27;@/stores/token.js&#x27;</span></span><br><span class="line"><span class="keyword">const</span> tokenStore = <span class="title function_">useTokenStore</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//上传成功的回调函数</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">uploadSuccess</span> = (<span class="params">result</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">//img就是后台响应的数据，格式为：&#123;code:状态码，message：提示信息，data: 图片的存储地址&#125;</span></span><br><span class="line">    articleModel.<span class="property">value</span>.<span class="property">coverImg</span> = result.<span class="property">data</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(result.<span class="property">data</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%96%87%E7%AB%A0%E5%86%85%E5%AE%B9%E7%AE%A1%E7%90%86%E5%80%BC%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0.png" alt=""></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">	将来当点击+图标，选择本地图片后，el-upload这个组件会自动发送请求，把图片上传到指定的服务器上，而不需要我们自己使用axios发送异步请求，所以需要给el-upload标签添加一些属性，控制请求的发送</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line">常用属性：</span><br><span class="line">	auto-upload:是否自动上传</span><br><span class="line">	action: 服务器接口路径</span><br><span class="line">	name: 上传的文件字段名</span><br><span class="line">	headers: 设置上传的请求头</span><br><span class="line">	on-success: 上传成功的回调函数</span><br></pre></td></tr></table></figure>
<h5 id="gt-添加文章接口调用"><a href="#gt-添加文章接口调用" class="headerlink" title="=&gt; 添加文章接口调用"></a>=&gt; 添加文章接口调用</h5><p><strong>article.js</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request <span class="keyword">from</span> <span class="string">&#x27;@/utils/request.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//接口函数:请求参数格式：application/json =&gt; 后端@RequestBody</span></span><br><span class="line"><span class="comment">//添加文章</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">articleAddService</span> = (<span class="params">articleData</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> request.<span class="title function_">post</span>(<span class="string">&#x27;/article&#x27;</span>,articleData);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>articleManagement.vue</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//添加文章</span></span><br><span class="line"><span class="keyword">import</span> &#123;articleAddService&#125; <span class="keyword">from</span> <span class="string">&#x27;@/api/article.js&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">ElMessage</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;element-plus&#x27;</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">addArticle</span> = <span class="keyword">async</span>(<span class="params">clickState</span>) =&gt; &#123;</span><br><span class="line">    articleModel.<span class="property">value</span>.<span class="property">state</span> = clickState;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//调用接口</span></span><br><span class="line">    <span class="keyword">let</span> result = <span class="keyword">await</span> <span class="title function_">articleAddService</span>(articleModel.<span class="property">value</span>);</span><br><span class="line"></span><br><span class="line">    <span class="title class_">ElMessage</span>.<span class="title function_">success</span>(result.<span class="property">msg</span> ? result.<span class="property">msg</span>:<span class="string">&#x27;添加成功&#x27;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">//让抽屉消失</span></span><br><span class="line">    visibleDrawer.<span class="property">value</span> = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//刷新当前列表</span></span><br><span class="line">    <span class="title function_">articleList</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">&quot;primary&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;addArticle(&#x27;已发布&#x27;)&quot;</span>&gt;</span>发布<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">&quot;info&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;addArticle(&#x27;草稿&#x27;)&quot;</span>&gt;</span>草稿<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="3-6-4：个人信息"><a href="#3-6-4：个人信息" class="headerlink" title="3.6.4：个人信息"></a>3.6.4：个人信息</h4><p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E6%80%BB%E8%A7%88%E5%9B%BE.png" alt=""></p>
<p><strong>src/stores/user.js中，定义个人中心状态</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineStore &#125; <span class="keyword">from</span> <span class="string">&quot;pinia&quot;</span></span><br><span class="line"><span class="keyword">import</span> &#123;ref&#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> useUserInfoStore = <span class="title function_">defineStore</span>(<span class="string">&#x27;userInfo&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">//定义状态相关的内容</span></span><br><span class="line">    <span class="comment">//1.定义用户信息，默认是空对象</span></span><br><span class="line">    <span class="keyword">const</span> info = <span class="title function_">ref</span>(&#123;&#125;)</span><br><span class="line"></span><br><span class="line">    <span class="comment">//2.定义修改用户信息的方法</span></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">setInfo</span> = (<span class="params">newInfo</span>)=&gt;&#123;</span><br><span class="line">        info.<span class="property">value</span> = newInfo</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//3.定义清空用户信息的方法</span></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">removeInfo</span> = (<span class="params"></span>)=&gt;&#123;</span><br><span class="line">        info.<span class="property">value</span>=&#123;&#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;info,setInfo,removeInfo&#125;</span><br><span class="line"></span><br><span class="line">&#125;,&#123;<span class="attr">persist</span>:<span class="literal">true</span>&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> useUserInfoStore;</span><br></pre></td></tr></table></figure>
<h5 id="gt-顶部导航栏信息"><a href="#gt-顶部导航栏信息" class="headerlink" title="=&gt; 顶部导航栏信息"></a>=&gt; 顶部导航栏信息</h5><p><strong>user.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request from <span class="string">&#x27;@/utils/request.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//接口函数:请求参数格式：application/json =&gt; 后端@GetMapping</span></span><br><span class="line"><span class="comment">//获取用户详细信息</span></span><br><span class="line">export <span class="type">const</span> <span class="variable">userInfoService</span> <span class="operator">=</span> ()=&gt;&#123;</span><br><span class="line">    <span class="keyword">return</span> request.get(<span class="string">&#x27;/user/userInfo&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>backsystem.vue</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//调用函数，获取用户详细信息</span></span><br><span class="line"><span class="keyword">import</span> avatar <span class="keyword">from</span> <span class="string">&#x27;@/assets/default.png&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;userInfoService&#125; <span class="keyword">from</span> <span class="string">&#x27;@/api/user.js&#x27;</span></span><br><span class="line"><span class="keyword">import</span> useUserInfoStore <span class="keyword">from</span> <span class="string">&#x27;@/stores/userinfo.js&#x27;</span></span><br><span class="line"><span class="keyword">const</span> userInfoStore = <span class="title function_">useUserInfoStore</span>();</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">getUserInfo</span> = <span class="keyword">async</span>(<span class="params"></span>)=&gt;&#123;</span><br><span class="line">    <span class="comment">//调用接口</span></span><br><span class="line">    <span class="keyword">let</span> result = <span class="keyword">await</span> <span class="title function_">userInfoService</span>();</span><br><span class="line">    <span class="comment">//数据存储到pinia中</span></span><br><span class="line">    userInfoStore.<span class="title function_">setInfo</span>(result.<span class="property">data</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">getUserInfo</span>();</span><br></pre></td></tr></table></figure>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E4%B9%8B%E4%BB%A3%E7%A0%81%E5%B1%95%E7%A4%BA.png" alt=""></p>
<h5 id="gt-下拉菜单功能实现"><a href="#gt-下拉菜单功能实现" class="headerlink" title="=&gt; 下拉菜单功能实现"></a>=&gt; 下拉菜单功能实现</h5><p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E4%B9%8B%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95.png" alt=""></p>
<p><strong>backsystem.vue</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//条目被点击后，调用的函数</span></span><br><span class="line"><span class="keyword">import</span> &#123;useRouter&#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">useRouter</span>();</span><br><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">ElMessage</span>,<span class="title class_">ElMessageBox</span>&#125; <span class="keyword">from</span> <span class="string">&#x27;element-plus&#x27;</span></span><br><span class="line"><span class="keyword">import</span> useUserInfoStore <span class="keyword">from</span> <span class="string">&#x27;@/stores/userinfo.js&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; useTokenStore &#125; <span class="keyword">from</span> <span class="string">&#x27;@/stores/token.js&#x27;</span></span><br><span class="line"><span class="keyword">const</span> tokenStore = <span class="title function_">useTokenStore</span>();</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">handleCommand</span> = (<span class="params">command</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">//判断指令</span></span><br><span class="line">    <span class="keyword">if</span>(command === <span class="string">&#x27;logout&#x27;</span>)&#123;</span><br><span class="line">        <span class="comment">//退出登录 =&gt; 确认框</span></span><br><span class="line">        <span class="comment">//提示用户 确认框</span></span><br><span class="line">        <span class="title class_">ElMessageBox</span>.<span class="title function_">confirm</span>(</span><br><span class="line">            <span class="string">&#x27;你确认要退出吗？&#x27;</span>,</span><br><span class="line">            <span class="string">&#x27;温馨提示&#x27;</span>,</span><br><span class="line">            &#123;</span><br><span class="line">            <span class="attr">confirmButtonText</span>: <span class="string">&#x27;确定&#x27;</span>,</span><br><span class="line">            <span class="attr">cancelButtonText</span>: <span class="string">&#x27;取消&#x27;</span>,</span><br><span class="line">            <span class="attr">type</span>: <span class="string">&#x27;warning&#x27;</span>,</span><br><span class="line">            &#125;</span><br><span class="line">        )</span><br><span class="line">            .<span class="title function_">then</span>(<span class="title function_">async</span>() =&gt; &#123;</span><br><span class="line">                <span class="comment">//退出登录</span></span><br><span class="line">                <span class="comment">//1.清空pinia中储存的token以及个人信息</span></span><br><span class="line">                tokenStore.<span class="title function_">removeToken</span>()</span><br><span class="line">                userInfoStore.<span class="title function_">removeInfo</span>()</span><br><span class="line"></span><br><span class="line">                <span class="comment">//2.跳转到登录页面</span></span><br><span class="line">                router.<span class="title function_">push</span>(<span class="string">&#x27;/login&#x27;</span>)</span><br><span class="line"></span><br><span class="line">                <span class="title class_">ElMessage</span>(&#123;</span><br><span class="line">                    <span class="attr">type</span>: <span class="string">&#x27;success&#x27;</span>,</span><br><span class="line">                    <span class="attr">message</span>: <span class="string">&#x27;退出登录成功&#x27;</span>,</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;)</span><br><span class="line">            .<span class="title function_">catch</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">                <span class="title class_">ElMessage</span>(&#123;</span><br><span class="line">                    <span class="attr">type</span>: <span class="string">&#x27;info&#x27;</span>,</span><br><span class="line">                    <span class="attr">message</span>: <span class="string">&#x27;用户取消了退出登录&#x27;</span>,</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;)</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="comment">//路由，跳转至相应的页面</span></span><br><span class="line">        router.<span class="title function_">push</span>(<span class="string">&#x27;/user/&#x27;</span>+command)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>command参考<strong>src/router/index.js</strong>中的【<strong>路径</strong>】。</p>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E4%B9%8B%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E4%BB%A3%E7%A0%81%E5%9B%BE.png" alt=""></p>
<h4 id="3-6-5：基本资料"><a href="#3-6-5：基本资料" class="headerlink" title="3.6.5：基本资料"></a>3.6.5：基本资料</h4><p><strong>基本资料页面</strong></p>
<p><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E5%9F%BA%E6%9C%AC%E8%B5%84%E6%96%99%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA.png" alt=""></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">setup</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> userInfo = <span class="title function_">ref</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">id</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">username</span>: <span class="string">&#x27;zhangsan&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">nickname</span>: <span class="string">&#x27;zs&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">email</span>: <span class="string">&#x27;zs@163.com&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">&#125;)</span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> rules = &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">nickname</span>: [</span></span><br><span class="line"><span class="language-javascript">        &#123; <span class="attr">required</span>: <span class="literal">true</span>, <span class="attr">message</span>: <span class="string">&#x27;请输入用户昵称&#x27;</span>, <span class="attr">trigger</span>: <span class="string">&#x27;blur&#x27;</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">        &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">pattern</span>: <span class="regexp">/^\S&#123;2,10&#125;$/</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">message</span>: <span class="string">&#x27;昵称必须是2-10位的非空字符串&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">trigger</span>: <span class="string">&#x27;blur&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    ],</span></span><br><span class="line"><span class="language-javascript">    <span class="attr">email</span>: [</span></span><br><span class="line"><span class="language-javascript">        &#123; <span class="attr">required</span>: <span class="literal">true</span>, <span class="attr">message</span>: <span class="string">&#x27;请输入用户邮箱&#x27;</span>, <span class="attr">trigger</span>: <span class="string">&#x27;blur&#x27;</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">        &#123; <span class="attr">type</span>: <span class="string">&#x27;email&#x27;</span>, <span class="attr">message</span>: <span class="string">&#x27;邮箱格式不正确&#x27;</span>, <span class="attr">trigger</span>: <span class="string">&#x27;blur&#x27;</span> &#125;</span></span><br><span class="line"><span class="language-javascript">    ]</span></span><br><span class="line"><span class="language-javascript">&#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-card</span> <span class="attr">class</span>=<span class="string">&quot;page-container&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">template</span> #<span class="attr">header</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;header&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span>&gt;</span>基本资料<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">el-row</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:span</span>=<span class="string">&quot;12&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">el-form</span> <span class="attr">:model</span>=<span class="string">&quot;userInfo&quot;</span> <span class="attr">:rules</span>=<span class="string">&quot;rules&quot;</span> <span class="attr">label-width</span>=<span class="string">&quot;100px&quot;</span> <span class="attr">size</span>=<span class="string">&quot;large&quot;</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;登录名称&quot;</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.username&quot;</span> <span class="attr">disabled</span>&gt;</span><span class="tag">&lt;/<span class="name">el-input</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;用户昵称&quot;</span> <span class="attr">prop</span>=<span class="string">&quot;nickname&quot;</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.nickname&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">el-input</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;用户邮箱&quot;</span> <span class="attr">prop</span>=<span class="string">&quot;email&quot;</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">&quot;userInfo.email&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">el-input</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">&quot;primary&quot;</span>&gt;</span>提交修改<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">el-form</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">el-row</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">el-card</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>user.js</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> request from <span class="string">&#x27;@/utils/request.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//接口函数:请求参数格式：application/json =&gt; 后端@RequestBody</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p><strong>articleManagement.vue</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.个人信息之前已经存储到了pinia中，只需要从pinia中获取个人信息，替换模板数据即可</span></span><br><span class="line"><span class="comment">//个人信息的回写，展示当前用户信息</span></span><br><span class="line"><span class="keyword">import</span> useUserInfoStore <span class="keyword">from</span> <span class="string">&#x27;@/stores/userinfo.js&#x27;</span></span><br><span class="line"><span class="keyword">const</span> userInfoStore = <span class="title function_">useUserInfoStore</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> userInfo = <span class="title function_">ref</span>(&#123;...userInfoStore.<span class="property">info</span>&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//修改个人信息</span></span><br><span class="line"><span class="keyword">import</span> &#123;userInfoUpdateService&#125; <span class="keyword">from</span> <span class="string">&#x27;@/api/user.js&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">ElMessage</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;element-plus&#x27;</span></span><br><span class="line"><span class="keyword">const</span> userInfoTemp = userInfo</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">updateUserInfo</span> = <span class="keyword">async</span>(<span class="params"></span>)=&gt;&#123;</span><br><span class="line">    <span class="comment">//调用接口函数</span></span><br><span class="line">    <span class="keyword">let</span> result = <span class="keyword">await</span> <span class="title function_">userInfoUpdateService</span>(userInfoTemp.<span class="property">value</span>)</span><br><span class="line">    <span class="title class_">ElMessage</span>.<span class="title function_">success</span>(result.<span class="property">msg</span>?result.<span class="property">msg</span>:<span class="string">&#x27;修改成功&#x27;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">//修改pinia中的个人信息</span></span><br><span class="line">    userInfoStore.<span class="title function_">setInfo</span>(userInfoTemp.<span class="property">value</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>为修改按钮绑定单击事件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">&quot;primary&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;updateUserInfo&quot;</span>&gt;</span>提交修改<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://lemonworld.gitee.io/lemon-world">袖清暮雨</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://lemonworld.gitee.io/lemon-world/posts/1e302926.html">https://lemonworld.gitee.io/lemon-world/posts/1e302926.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://lemonworld.gitee.io/lemon-world" target="_blank">袖清暮雨` Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/lemon-world/tags/Vue/">Vue</a><a class="post-meta__tags" href="/lemon-world/tags/Web%E5%89%8D%E7%AB%AF/">Web前端</a><a class="post-meta__tags" href="/lemon-world/tags/%E4%BC%A0%E7%BB%9F%E5%BC%80%E5%8F%91/">传统开发</a><a class="post-meta__tags" href="/lemon-world/tags/%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/">项目搭建</a></div><div class="post_share"><div class="social-share" data-image="https://gitee.com/LemonWorld/picture/raw/master/img/%E8%BF%BD%E6%9C%88.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/lemon-world/posts/7f721cb1.html" title="项目搭建之SpringBoot基本操作归纳"><img class="cover" src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%A1%A5%E4%B8%8B%E5%A4%95%E9%98%B3.png" onerror="onerror=null;src='/lemon-world/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">项目搭建之SpringBoot基本操作归纳</div></div></a></div><div class="next-post pull-right"><a href="/lemon-world/posts/cca50181.html" title="项目搭建之Vue工程之路由"><img class="cover" src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E5%A4%95%E9%98%B3%E4%B8%8B%E7%9A%84%E7%BA%A2%E8%B7%AF%E7%81%AF.png" onerror="onerror=null;src='/lemon-world/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">项目搭建之Vue工程之路由</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/lemon-world/posts/ca437b77.html" title="项目搭建之Vue工程之初步搭建"><img class="cover" src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E9%AC%BC%E7%81%AD.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-02-24</div><div class="title">项目搭建之Vue工程之初步搭建</div></div></a></div><div><a href="/lemon-world/posts/cca50181.html" title="项目搭建之Vue工程之路由"><img class="cover" src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E5%A4%95%E9%98%B3%E4%B8%8B%E7%9A%84%E7%BA%A2%E8%B7%AF%E7%81%AF.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-04-12</div><div class="title">项目搭建之Vue工程之路由</div></div></a></div><div><a href="/lemon-world/posts/dc99e4b2.html" title="项目搭建之文件上传下载"><img class="cover" src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E9%97%B4%E8%B0%8D%E8%BF%87%E5%AE%B6%E5%AE%B6.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-04-20</div><div class="title">项目搭建之文件上传下载</div></div></a></div><div><a href="/lemon-world/posts/af5678a3.html" title="Vue学习之快速入门（一）"><img class="cover" src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E9%BE%99%E4%B8%8E%E5%88%9D%E9%9F%B3%E6%9C%AA%E6%9D%A5.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-02-07</div><div class="title">Vue学习之快速入门（一）</div></div></a></div><div><a href="/lemon-world/posts/d15b573b.html" title="Vue学习之指令篇（二）"><img class="cover" src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E9%9D%92.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-02-10</div><div class="title">Vue学习之指令篇（二）</div></div></a></div><div><a href="/lemon-world/posts/292c755d.html" title="Vue学习之深入探索(三)"><img class="cover" src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E4%B8%9C%E4%BA%AC%E9%A3%9F%E5%B0%B8%E9%AC%BC.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-02-17</div><div class="title">Vue学习之深入探索(三)</div></div></a></div></div></div><hr class="custom-hr"/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="/lemon-world/./img/sanjiu.jpg" onerror="this.onerror=null;this.src='/lemon-world/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">袖清暮雨</div><div class="author-info__description">一个技术宅的博客</div></div><div class="card-info-data site-data is-center"><a href="/lemon-world/archives/"><div class="headline">文章</div><div class="length-num">39</div></a><a href="/lemon-world/tags/"><div class="headline">标签</div><div class="length-num">21</div></a><a href="/lemon-world/categories/"><div class="headline">分类</div><div class="length-num">2</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/Lemon-World"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/Lemon-World" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">欢迎来到袖清暮雨`Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BD%95%E4%B8%BAaxios%EF%BC%9F"><span class="toc-number">1.</span> <span class="toc-text">何为axios？</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4"><span class="toc-number">2.</span> <span class="toc-text">基本步骤</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%EF%BC%9A%E5%AE%89%E8%A3%85axios"><span class="toc-number">2.1.</span> <span class="toc-text">一：安装axios</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8C%EF%BC%9A%E8%A7%A3%E5%86%B3%E3%80%90%E8%B7%A8%E5%9F%9F%E3%80%91%E9%97%AE%E9%A2%98"><span class="toc-number">2.2.</span> <span class="toc-text">二：解决【跨域】问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-%E5%9C%A8vit-config-js%E4%B8%AD%EF%BC%8C%E6%89%A9%E5%B1%95%E5%86%85%E5%AE%B9"><span class="toc-number">2.2.1.</span> <span class="toc-text">2.1 在vit.config.js中，扩展内容</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-%E5%9C%A8src-utils%E7%9B%AE%E5%BD%95%E4%B8%8B%E6%96%B0%E5%BB%BA%E4%B8%80%E4%B8%AArequest-js%E6%96%87%E4%BB%B6%EF%BC%8C%E5%86%85%E5%AE%B9%E5%A6%82%E4%B8%8B"><span class="toc-number">2.2.2.</span> <span class="toc-text">2.2 在src&#x2F;utils目录下新建一个request.js文件，内容如下</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%EF%BC%9A%E5%88%9B%E5%BB%BAapi%E6%8E%A5%E5%8F%A3-%E5%89%8D%E5%90%8E%E7%AB%AF%E4%BA%A4%E4%BA%92"><span class="toc-number">2.3.</span> <span class="toc-text">三：创建api接口(前后端交互)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E6%8F%90%E9%9C%80%E7%9F%A5%EF%BC%9A%E5%89%8D%E7%AB%AF%E8%8E%B7%E5%8F%96%E5%90%8E%E7%AB%AF%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F"><span class="toc-number">2.3.1.</span> <span class="toc-text">前提需知：前端获取后端数据格式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1%E3%80%81Pinia%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%BA%93"><span class="toc-number">2.3.2.</span> <span class="toc-text">3.1、Pinia状态管理库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2%E3%80%81pinia%E6%8C%81%E4%B9%85%E5%8C%96%E6%8F%92%E4%BB%B6%E2%80%94%E2%80%94persist%E3%80%90%E4%BC%98%E5%8C%96%E3%80%91"><span class="toc-number">2.3.3.</span> <span class="toc-text">3.2、pinia持久化插件——persist【优化】</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-3%E3%80%81%E6%B3%A8%E5%86%8C%E6%8E%A5%E5%8F%A3%EF%BC%88-RequestParam%EF%BC%89"><span class="toc-number">2.3.4.</span> <span class="toc-text">3.3、注册接口（@RequestParam）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-4%E3%80%81%E7%99%BB%E5%BD%95%E6%8E%A5%E5%8F%A3%EF%BC%88-RequestParam%EF%BC%89"><span class="toc-number">2.3.5.</span> <span class="toc-text">3.4、登录接口（@RequestParam）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-5%E3%80%81%E6%96%87%E7%AB%A0%E5%88%86%E7%B1%BB"><span class="toc-number">2.3.6.</span> <span class="toc-text">3.5、文章分类</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-5-1%EF%BC%9AGetMapping%E6%8E%A5%E5%8F%A3%EF%BC%88%E8%8E%B7%E5%8F%96%E6%96%87%E7%AB%A0%E5%88%86%E7%B1%BB%EF%BC%89"><span class="toc-number">2.3.6.1.</span> <span class="toc-text">3.5.1：GetMapping接口（获取文章分类）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-5-2%EF%BC%9A%E5%BC%B9%E7%AA%97%E5%8A%9F%E8%83%BD%EF%BC%88%E6%96%87%E7%AB%A0%E5%88%86%E7%B1%BB%E6%B7%BB%E5%8A%A0-%E6%96%87%E7%AB%A0%E5%88%86%E7%B1%BB%E4%BF%AE%E6%94%B9%EF%BC%89"><span class="toc-number">2.3.6.2.</span> <span class="toc-text">3.5.2：弹窗功能（文章分类添加+文章分类修改）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-5-3%EF%BC%9ADeleteMapping%E6%8E%A5%E5%8F%A3%EF%BC%88%E6%96%87%E7%AB%A0%E5%88%86%E7%B1%BB%E5%88%A0%E9%99%A4-RequestParam%EF%BC%89"><span class="toc-number">2.3.6.3.</span> <span class="toc-text">3.5.3：DeleteMapping接口（文章分类删除@RequestParam）</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-6%E3%80%81%E6%96%87%E7%AB%A0%E5%86%85%E5%AE%B9%E7%AE%A1%E7%90%86"><span class="toc-number">2.3.7.</span> <span class="toc-text">3.6、文章内容管理</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%80%BB%E8%A7%88%E5%9B%BE"><span class="toc-number">2.3.7.1.</span> <span class="toc-text">总览图</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-6-1%EF%BC%9AGetMapping%E6%8E%A5%E5%8F%A3%EF%BC%88%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8%E6%9F%A5%E8%AF%A2%EF%BC%89"><span class="toc-number">2.3.7.2.</span> <span class="toc-text">3.6.1：GetMapping接口（文章列表查询）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-6-2%EF%BC%9A%E6%90%9C%E7%B4%A2%E5%92%8C%E9%87%8D%E7%BD%AE%E5%92%8C%E9%A1%B5%E7%A0%81"><span class="toc-number">2.3.7.3.</span> <span class="toc-text">3.6.2：搜索和重置和页码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-6-3%EF%BC%9APostMapping%E6%8E%A5%E5%8F%A3%EF%BC%88%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%EF%BC%89"><span class="toc-number">2.3.7.4.</span> <span class="toc-text">3.6.3：PostMapping接口（添加文章）</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%95%88%E6%9E%9C%E5%9B%BE"><span class="toc-number">2.3.7.4.1.</span> <span class="toc-text">效果图</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AE%9E%E9%99%85%E6%93%8D%E4%BD%9C"><span class="toc-number">2.3.7.4.2.</span> <span class="toc-text">实际操作</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#gt-%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8"><span class="toc-number">2.3.7.4.3.</span> <span class="toc-text">&#x3D;&gt; 富文本编辑器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#gt-%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0"><span class="toc-number">2.3.7.4.4.</span> <span class="toc-text">&#x3D;&gt; 图片上传???</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#gt-%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E6%8E%A5%E5%8F%A3%E8%B0%83%E7%94%A8"><span class="toc-number">2.3.7.4.5.</span> <span class="toc-text">&#x3D;&gt; 添加文章接口调用</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-6-4%EF%BC%9A%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF"><span class="toc-number">2.3.7.5.</span> <span class="toc-text">3.6.4：个人信息</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#gt-%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F%E4%BF%A1%E6%81%AF"><span class="toc-number">2.3.7.5.1.</span> <span class="toc-text">&#x3D;&gt; 顶部导航栏信息</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#gt-%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0"><span class="toc-number">2.3.7.5.2.</span> <span class="toc-text">&#x3D;&gt; 下拉菜单功能实现</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-6-5%EF%BC%9A%E5%9F%BA%E6%9C%AC%E8%B5%84%E6%96%99"><span class="toc-number">2.3.7.6.</span> <span class="toc-text">3.6.5：基本资料</span></a></li></ol></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/lemon-world/posts/dc99e4b2.html" title="项目搭建之文件上传下载"><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E9%97%B4%E8%B0%8D%E8%BF%87%E5%AE%B6%E5%AE%B6.png" onerror="this.onerror=null;this.src='/lemon-world/img/404.jpg'" alt="项目搭建之文件上传下载"/></a><div class="content"><a class="title" href="/lemon-world/posts/dc99e4b2.html" title="项目搭建之文件上传下载">项目搭建之文件上传下载</a><time datetime="2024-04-19T16:00:00.000Z" title="发表于 2024-04-20 00:00:00">2024-04-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/lemon-world/posts/cca50181.html" title="项目搭建之Vue工程之路由"><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E5%A4%95%E9%98%B3%E4%B8%8B%E7%9A%84%E7%BA%A2%E8%B7%AF%E7%81%AF.png" onerror="this.onerror=null;this.src='/lemon-world/img/404.jpg'" alt="项目搭建之Vue工程之路由"/></a><div class="content"><a class="title" href="/lemon-world/posts/cca50181.html" title="项目搭建之Vue工程之路由">项目搭建之Vue工程之路由</a><time datetime="2024-04-11T16:00:00.000Z" title="发表于 2024-04-12 00:00:00">2024-04-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/lemon-world/posts/1e302926.html" title="项目搭建之前后端交互（跨域,页面跳转,Pinia）+实战"><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E8%BF%BD%E6%9C%88.png" onerror="this.onerror=null;this.src='/lemon-world/img/404.jpg'" alt="项目搭建之前后端交互（跨域,页面跳转,Pinia）+实战"/></a><div class="content"><a class="title" href="/lemon-world/posts/1e302926.html" title="项目搭建之前后端交互（跨域,页面跳转,Pinia）+实战">项目搭建之前后端交互（跨域,页面跳转,Pinia）+实战</a><time datetime="2024-04-10T16:00:00.000Z" title="发表于 2024-04-11 00:00:00">2024-04-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/lemon-world/posts/7f721cb1.html" title="项目搭建之SpringBoot基本操作归纳"><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E6%A1%A5%E4%B8%8B%E5%A4%95%E9%98%B3.png" onerror="this.onerror=null;this.src='/lemon-world/img/404.jpg'" alt="项目搭建之SpringBoot基本操作归纳"/></a><div class="content"><a class="title" href="/lemon-world/posts/7f721cb1.html" title="项目搭建之SpringBoot基本操作归纳">项目搭建之SpringBoot基本操作归纳</a><time datetime="2024-03-26T16:00:00.000Z" title="发表于 2024-03-27 00:00:00">2024-03-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/lemon-world/posts/452204e8.html" title="项目搭建之SpringBoot配置归纳"><img src= "" data-lazy-src="https://gitee.com/LemonWorld/picture/raw/master/img/%E9%AD%94%E6%B3%95%E5%B0%91%E5%A5%B3%E5%B0%8F%E5%9C%86.png" onerror="this.onerror=null;this.src='/lemon-world/img/404.jpg'" alt="项目搭建之SpringBoot配置归纳"/></a><div class="content"><a class="title" href="/lemon-world/posts/452204e8.html" title="项目搭建之SpringBoot配置归纳">项目搭建之SpringBoot配置归纳</a><time datetime="2024-03-17T16:00:00.000Z" title="发表于 2024-03-18 00:00:00">2024-03-18</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://gitee.com/LemonWorld/picture/raw/master/img/%E8%BF%BD%E6%9C%88.png')"><div id="footer-wrap"><div class="copyright">&copy;2023 - 2024 By 袖清暮雨</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">welcome to <a href="https://lemonworld.gitee.io/lemon-world/">袖清暮雨</a> Blog!</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/lemon-world/js/utils.js"></script><script src="/lemon-world/js/main.js"></script><script src="/lemon-world/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><div class="js-pjax"><script>(() => {
  const initValine = () => {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: 'lmEQpOsJf8mT3BIGHZZ7EDq4-gzGzoHsz',
      appKey: '7APMLg7dJeJb0sE6hHymEyaY',
      avatar: 'monsterid',
      serverURLs: '7frkCVvvwQAZBPCcjmeKotvz',
      emojiMaps: "",
      path: window.location.pathname,
      visitor: true
    }, null))
  }

  const loadValine = async () => {
    if (typeof Valine === 'function') initValine()
    else {
      await getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js')
      initValine()
    }
  }

  if ('Valine' === 'Valine' || !false) {
    if (false) btf.loadComment(document.getElementById('vcomment'),loadValine)
    else setTimeout(loadValine, 0)
  } else {
    window.loadOtherComment = loadValine
  }
})()</script></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><div class="app-refresh" id="app-refresh" style="position: fixed;top: -2.2rem;left: 0;right: 0;z-index: 99999;padding: 0 1rem;font-size: 15px;height: 2.2rem;transition: all 0.3s ease;"><div class="app-refresh-wrap" style=" display: flex;color: #fff;height: 100%;align-items: center;justify-content: center;"><label>✨ 有新文章啦！✨  👉</label><a href="javascript:void(0)" onclick="location.reload()"><span style="color: #fff;text-decoration: underline;cursor: pointer;">点击使用</span></a></div></div><script>if ('serviceWorker' in navigator) {
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.addEventListener('controllerchange', function() {
showNotification()
})
}
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js')
})
}
function showNotification() {
if (GLOBAL_CONFIG.Snackbar) {
var snackbarBg =
document.documentElement.getAttribute('data-theme') === 'light' ?
GLOBAL_CONFIG.Snackbar.bgLight :
GLOBAL_CONFIG.Snackbar.bgDark
var snackbarPos = GLOBAL_CONFIG.Snackbar.position
Snackbar.show({
text: '✨ 有新文章啦！✨  👉',
backgroundColor: snackbarBg,
duration: 500000,
pos: snackbarPos,
actionText: '点击使用',
actionTextColor: '#fff',
onActionClick: function(e) {
location.reload()
},
})
} else {
var showBg =
document.documentElement.getAttribute('data-theme') === 'light' ?
'#3b70fc' :
'#1f1f1f'
var cssText = `top: 0; background: ${showBg};`
document.getElementById('app-refresh').style.cssText = cssText
}
}</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/lemon-world/js/search/local-search.js"></script></div></div><!-- hexo injector body_end start --><script data-pjax>
  function butterfly_clock_anzhiyu_injector_config(){
    var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
    var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img class="entered loading" id="card-clock-loading" src= "" data-lazy-src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading"/></div></div></div></div></div>';
    console.log('已挂载butterfly_clock_anzhiyu')
    if(parent_div_git) {
      parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = 'all';
  var qweather_key = '8fb12d98d85c4c88831aa57a850d7b9f';
  var gaud_map_key = '70fbf493bf0d0ba744a308b047ea559e';
  var baidu_ak_key = 'undefined';
  var flag = 0;
  var clock_rectangle = '112.6534116,27.96920845';
  var clock_default_rectangle_enable = 'true';

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_clock_anzhiyu_injector_config();
  }
  else if (epage === cpage){
    butterfly_clock_anzhiyu_injector_config();
  }
  </script><script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script><script data-pjax src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/clock.min.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1.5s');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '30');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__animated');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('article-sort-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__slideInRight');
    arr[i].setAttribute('data-wow-duration', '1.5s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__animated');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js"></script><!-- hexo injector body_end end --><script src="/lemon-world/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"tagMode":false,"debug":false,"model":{"jsonPath":"/lemon-world/live2dw/assets/koharu.model.json"},"display":{"position":"left","width":150,"height":300},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/"});</script></body></html>